<template>
  <div class="note-box flex-center-row">
    <div style="width: 100%;height: 100%;text-align: left;padding: 50px" v-html="content">

    </div>
    <!--      <Editor @notice="handleValue" v-model="content" :editor-style="editorStyle"></Editor>-->
    <Editor :editor-style="editorStyle" @notice="handleValue" position="bottom"></Editor>
    <div style=" position: fixed;bottom: 20px;right: 20px;" class="flex-center-col">
      <el-badge is-dot  style="margin-bottom: 10px">
        <el-button circle @click="showTips" class="share-button" icon="el-icon-question" >

        </el-button>
      </el-badge>
      <YButton @click="saveNote" class="note-save-btn" default-bg-color="darkcyan" icon="el-icon-check">保存</YButton>
    </div>

  </div>

</template>

<script>
  import Editor from "../../components/editor/Editor";
  import YButton from "../../components/button/YButton";

  export default {
    name: "Note",
    components: {YButton, Editor},
    data() {

      return {
        content: "",
        editorStyle: {},
        saveDate:new Date(),
        noticeTime:false
      }
    },
    methods: {
      handleValue(value) {
        console.log(value)
        this.content += value
      },
      showTips(){
        this.$notify({

          title: '帮助(快捷键)',
          dangerouslyUseHTMLString: true,
          message: 'ctrl+s: 保存本文'
        });
      },
      saveNote(e) {

          let now = new Date()
          let time=(now.getTime()-this.saveDate.getTime())/1000
        // 限制高频提交
        if(time>=5){


          this.$message({
            type: 'success',
            message: "保存成功",
            duration: 1000,
          })
          this.saveDate=now
          this.notice=false
        }else{

          if(!this.notice){
            this.$message({
              type: 'error',
              message: "提交速度太快,无法提交",
              duration: 1000,
            })
            this.$notify({
              type:'info',
              message:"两次提交之间至少间隔5s",
              duration:1000*5
            })
            this.notice=true
          }


        }


      },
      keydownEvent(e) {

        // 【保存】监听事件
        if (e.ctrlKey && e.keyCode === 83) {
          this.saveNote()
          e.preventDefault() //禁止默认事件
          return false
        }

      },
    },
    mounted() {

      document.onkeydown = this.keydownEvent
    }
  }
</script>

<style lang="less" scoped>
  .note-box {
    height: 100%;

    .note-save-btn {

      color: white;
      font-size: 20px;

    }
  }
</style>
